Know How 1001 for CalendarXP
Updated: 26 Aug 2001
The
CalendarXP series are more customizable & versatile than you can imagine. I
will write down the hints & tips bit by bit, so please check my website
frequently to get more surprises.
- Q:How to add a FlatCalendar to my web page?
A:Just add 1 calendar tag to
anywhere of your webpage, nothing else. And it turns into a beautiful calendar in your browser. MAGIC!?! ^_^ See the Template.htm for a
quick sample.
i.e.
<iframe
name="gToday:normal:agenda.js" id=
"gToday:normal:agenda.js" src=
"flatcjs.htm" frameborder= "2" scrolling= "no" style=
"border:ridge;"></iframe>
- Q:How do I make the calendar function under Netscape 4.x?
A:After your payment you will receive a full version package with additional script files by email. You don't need to change any
current setting of your calendar if you've already put one in use. Just copy the necessary files (except themes & agenda) to the directory of
your calendar and modify the calendar tag a little in your web page. That is all. The details can be found from the demo source in the developing
package.
- Q:How can I connect the calendar agendas to my database?
A:Depends on the CGI you are using, the solution might be a little different. But the basic idea is to make your CGI treat agenda.js
as a special CGI program so that the request to the web server will be direct to your CGI and let your CGI program generate the contents of it. Let
me show you an example on Tomcat with JSP engine:
- Let your Java programmer take the agenda.js file and code database scripts in it as if it was a JSP file. Assume the agenda table in your
database has these columns [ag_date, ag_msg, ag_color, ag_action, ag_imageurl]. A quick example will be:
<%@ page
contentType="text/javascript" %>
// == This file is fully configurable ==
/*** Default Action when you click a normal date ***/
var gsAction=" "; // You may even use self-defined function here. i.e. gsAction="fDemo()";
<% {connecting database and retrieve the agendas into a resultset: agendars} %>< br><% while (agendars.next()){%>
addEvent("<%=agendars.getString("ag_date")%>","("<%=agendars.getString("ag_msg")%>","("<%=agendars.getString("ag_color")%>","("<%=agendars.getString("ag_action")%>","("<%=agendars.getString("ag_imageurl")%>");
<% } agendars.getStatement().close(); %>
- Change the file name fromagenda.jstoagenda.js.jspand the 3rd portion of your
calendar tag's name as well.
Now the calendar will get the agendas from DB automatically. ^_^
- Q:Can I display the calendar on my Windows Desktop?
A: YES!This effect works on Windows with the Active Desktop support enabled (usually by upgrading your IE to 5.0). Just follow
these steps:
- Right-click on your windows desktop and select
"Properties".
- Select the "Web" panel and check the "View active
desktop as web pages". Uncheck the other items in the list.
- Click the "New" button to locate the desktopdemo.htm in
FlatCalendarXP.
- Click "OK" and resize the container of the calendar to a size that no scroll-bar comes out.
Now you can arrange your daily agendas on your desktop gracefully! Send us an email compliment if you like.
- Q:I like the Active Desktop trick, but can I have it automatically notify me of pending events everyday?
A:Add the following line to the calendar tag in desktopDemo.htm:
onload="with(frames[0])eval(fGetAgenda(gToday)[2])"
- Q:I noticed the tooltip is not always pop-up when I put the calendar on my desktop. What's wrong?
A:That will happen when the containing window cannot get focused. Add the following line to the calendar tag in desktopDemo.htm
to solve it:
onmouseover="self.focus()"
i.e.
<iframe name="gToday:normal:agenda.js" id="gToday:normal:agenda.js" src="flatcjs.htm" frameborder="2" scrolling="no"
style="border:ridge;" onmouseover="self.focus()" onload="with(frames[0])eval(fGetAgenda(gToday)[2])"></iframe>
- Q:How do I change the default month that is shown on the very beginning?
A:Change the first part (separated by colons) of the name of the calendar tag to any month using the [year,month] format. You can
also use the predefined "gToday" word to set it to current month. See the source code of demo file for examples.
- Q:How do I switch between the different themes for my calendar?
A:As easy as configuring the second part (separated by colons) of the name of the calendar tag to the theme's name. A theme
consists of two files with the same name but different suffix. For example, the "normal" theme is made up of normal.css and normal.js.
- Q:How are the options & agendas of the calendar configured?
A:Go into the theme files (.css and .js), modify the options inside according to the comments. Go into the agenda.js file for the
events & holiday plug-in. Note that you may even have different agenda files for different calendars in one page! Just set them in the third
part (separated by colons) of the name of your calendar tags!
- Q:How to create a beautiful wall calendar?
A:All you need is FlatCalendarXP 3.20, a printer and several images which can be downloaded from Internet or self-made. Then
following the steps:
- Decide the calendar size and look by defining the two
theme file - normal.css and normal.js.d
- Customize the desktopdemo.htm file to add some
surrounding decorations around you calendar if you like.
- Define the agenda.js file with the holiday,
anniversary or celebration highlights or images.
- Change the name of the calendar tag to the month that
you want to print. i.e. "[2001,6]:normal:agenda.js".
- Start desktopdemo.htm in a browser and select "print" from file menu.
Don't hate us if you become a distributor of wall calendars to your family and friends. ^_^
- Q:How do I leave out the days that are not in the current month?
A:Go into the fHoliday() function in your agenda.js file, remove the // before the 2nd line. That will give you this special
effect.
- Q:How to cross-over the past date?
A:Go into the fHoliday() function in your agenda.js file, remove the // before the 3rd line. That will give you this special
effect.
- Q:How to show a webpage in a designated frame when a date is clicked?
A:Use"popup('pageurl','framename')"as your agenda's action.
- Q:How to align the date number within the calendar cell?
A:Go to the themename.css file and find the .CalCell class, change the value of "text-align" to left, center or right.
- Q:How to hide the popped-up calendar when I click elsewhere of the page?
A:Put the following scripts at the bottom of your page:
<script>document.onclick= function(e){vart=(!e)?self.event.srcElement.value:e.target.value;if(t!=" V ")
gfPop.fHideCal();}</script>
- Q:How to hide the popped-up calendar when I resizing the browser?
A:Put the following scripts at the bottom of your page:
<script>self.onresize= function(){gfPop.fHideCal();}</script>
- Q:How to have PopCalendarXP controls with different agenda or themes on one page?
A:Define more than one calendar-tag on this page with different themes or agenda name, and most important -- set the control name
in the 4th portion of the calendar-tag's name.
<body>
....
<!-- PopCalendar Area
-->
<iframe name="gToday:theme1:agenda1.js:gfPop1" id="gToday:theme1:agenda1.js:gfPop1" src="popcjs.htm" frameborder="2"
scrolling="no" style="border:ridge;visibility:hidden;position:absolute;z-index:65535"></iframe>
<iframe name="gToday:theme2:agenda2.js:gfPop2" id="gToday:theme2:agenda2.js:gfPop2" src="popcjs.htm" frameborder="2" scrolling="no"
style="border:ridge;visibility:hidden;position:absolute;z-index:65535"></iframe>
</body>
And then use "gfPop1.PopCalendar()" & "gfPop2.PopCalendar()" accordingly in your date control scripts.
- Q:How can I avoid seeing the FlatCalendar inflating itself everytime the
page loading?
A:Just preset the calendar tag's dimension
parameters to a proper value by adding the "width" and "height" to
the tag. You need to fine-tune the values until no visual inflating during
page loading.
i.e.
<iframe name="gToday:normal:agenda.js" id=
"gToday:normal:agenda.js"
src=
"flatcjs.htm" frameborder= "2" scrolling=
"no" style= "border:ridge;"
width=183 height=209></iframe>
- Q:I have a heavy-load page. Can I speed up
the PopCalendar loading?
A:Yes!
Move the <iframe> calendar tags
from the bottom of the page to the top, just below the <body> tag. Be
careful not moving the NN4 engine tag, because doing so will generally cause
trouble.
- Q:How can I replace the ugly "V" button with
a nice image for the PopCalendar?
A:Well, is it so ugly? ;-) Anyway, you can
use an <IMG> tag or any tag you prefer to replace the <INPUT> tag.
The only key is the onclick event, no magic! But be sure the parameter passed
in is correct within the context. i.e. The "this.form" is only eligible for
<INPUT>, for other tags use "document.formname" instead.
- Q:How can I use the wonderful FlatCalendar
themes for the PopCalendar?
A:Well, it's no problem at all.
The themes of the two products are exchangable since version 3.54. So it's
just as easy as take-and-use. ^)^
- Q:How can I make the event popup window go
to the top everytime?
A:In agenda.js file, add the following
codes and replace all the "popup(xxx)" with "pop(xxx)".
function pop(url) {
var w =
parent.open(url,null,gsPopConfig);
if (w) w.focus();
}
Note: This
bug has been fixed since version 4.10, but it is a
good example to show you that you can use self-defined functions to config the
calendar's behaviors without modifying the code engine!! Take a good look at
PopCalendar's powerful demo for more interesting ideas. ^_^
- Q:How can I show the FlatCalendar with offset relatively to
its currenty position?
A:Simply add the "position:relative;left:<leftoffset>;top:<topoffset>;"
to the style of <iframe>, and "top=<topoffset>
left=<leftoffset>" to the <ilayer> tag.
- Q:How can I remove the outside border of
calendar in IE&NN6?
A:Simply remove the
"border:ridge;" from the style of <iframe>
tag and set "frameborder=0".
- Q:How can I get the calendar centered when it goes beyond the border of browser?
A:Add a self-defined function as following to the agenda.js file, and call it in your HTML page instead of fPopCalendar()
function fMyPop(a,b,c,d) {
if (!document.layers) {var p=fGetXY(a);parent.scrollTo(p[0]-20,p[1]-20);}
fPopCalendar(a,b,c,d);
}
Note: this code won't work for NN4, but you've got the idea and may code one by yourself.
- Q:How can I get the FlatCalendar auto-switched to the prev/next month when the user clicked on the dates of prev/next month?
A:Append a self-defined function as following to the agenda.js file, and set the value of "gsAction" to "fAutoSwitch(y,m);".
function fAutoSwitch(y,m) {
if (m!=gCurMonth[1]) fSetCal(y,m);
}